import '../test.css'
import React, { useContext, useEffect, useState, memo } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { MsgContent } from './msgContent.js'
// import store from "../store/index"
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, addToNums } from '../store/modules/counterStore'
import { fetchChannelList } from '../store/modules/channelStore'

const ListItem = memo(function ListIt(props) {
  const navigate = useNavigate()
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  //得到dispatch函数
  const dispatch = useDispatch()
  const { message, setMessage } = useContext(MsgContent)
  const [count1, setCount] = useState(props.item.count || 0)
  function minusItem(item) {
    //store.dispatch({type:'DECREMENT'})
    dispatch(decrement())
    if (count1) {
      setCount(count1 - 1)
    }
  }

  function addItem(item) {
    //store.dispatch({type:'INCREMENT'})
    dispatch(increment())
    setCount(count1 + 1)
  }

  function add10ToNums() {
    dispatch(addToNums(10))
    setCount(count1 + 10)
  }

  //  store.subscribe(()=>{
  //     console.log(2333,store.getState())
  // })

  //触发channelList异步请求执行
  useEffect(() => {
    dispatch(fetchChannelList())
    console.log('channelList:', channelList)
  }, [dispatch])

  function toCharts() {
    navigate(`/article/${props.item.id}?name=英伟达&desc=芯片组专家`, {
      state: { from: 'listItem' },
    })
  }
  return (
    <div
      className="list-content"
      style={{ margin: '12px' }}
      key={props.item.id}
    >
      {/* {count} */}
      <img
        src={require(`../images/${props.item.img}`)}
        style={{ width: '45px', height: 'auto' }}
      />{' '}
      <span className="small-letter">{props.item.name}</span>
      <div style={{ fontSize: '14px', fontWeight: 600 }}>
        {props.item.comment}
      </div>
      <div className="list-bottom small-letter">
        <span>{props.item.time}</span>
        <span>点赞数：100</span>
        <Link to="/article">显示/跳转到echart图表</Link>
        {props.id === props.item.id && (
          <button onClick={() => props.deleteItem(props.id)}>删除</button>
        )}
      </div>
      <span
        style={{ width: '60px', overFlow: 'hidden', textOverFlow: 'ellipsis' }}
      >
        {message}
      </span>
      <span>
        <button onClick={() => minusItem(props.item)}>-</button>
        <input value={count1} />
        <button onClick={() => addItem(props.item)}>+</button>
        <button onClick={() => add10ToNums(props.item)}>10+</button>
      </span>
      <span
        style={{ marginLeft: '12px', color: 'blue', cursor: 'pointer' }}
        onClick={toCharts}
      >
        详情
      </span>
    </div>
  )
})

export default ListItem
